如果說HTML是網頁開發的第一堂課，CSS差不多就會再第二堂課出現了，好消息是，只要用第二堂學到的語法，就可以製作 Web Motion 啦！
而且若真的要細談效能的話，CSS這邊能把效果寫出來、符合開發情境與需求 (瀏覽器支援度問題等)，那基本上就使用CSS這邊寫就是相當合適的選擇。

接下來就直接進入正題
CSS動畫基本架構：animation 與他的好夥伴 @keyframes

.my-div{
animation: my-animation 3s;
}
@keyframes my-animation{
  0%{
      opacity:0;
    }
  100%{
      opacity:1;
    }
}

第一步、keyframes給個名字，定義至少兩個關鍵影格狀態
keyframe用@標籤開頭，後面帶上一個命名，裡面設定動畫漸變過程中的「關鍵影格」，關鍵影格之間有狀態數值的差異，加上時間即可構成「動」的變化。

@keyframes my-animation{
  0%{
      opacity:0;
    }
  100%{
      opacity:1;
    }
}

這邊至少要有起點與終點的兩個狀態，當然也可以加上速率的差異，例如上方的範例，從不透明度為0開始 (就是完全透明的狀態)，到終點是完全不透明，如果是沒有加上速度相關控制，在最中間的50%時，opacity也會來到0.5，如果希望是帶有先快後慢的效果，可以在50%的時候增加設定(當然可以把opacity:0.5設定在50%之前也可以，程式寫法很自由的~)

@keyframes my-animation-two{
  0%{
      opacity:0;
    }
    50%{
      opacity:0.8;  
    }
  100%{
      opacity:1;
    }
}

第二步、把keyframes動畫利用animation加到網頁裡
利用「animation」即可把剛剛定義好的 keyframes 加進指定的網頁元件中，如之前提到「時間」是Motion的靈魂元素，因此這邊除了需要放入keyframes名字，也須把持續多久的時間加進：

.my-div{
animation: my-animation 3s;
}

keyframes可以設定很多個，若希望在使用兩個keyframes特效，可以用逗號隔開：

.my-div{
animation: my-animation 3s, my-animation-two 3s;
}